<template>
  <view class="ikz-bid">
    <ikz-loading :css-data="loading_css"></ikz-loading>
    <!-- ad -->
    <!-- list -->
    <view>
      <view class="ikz-sticky-box" id="ikz-sticky-box">
        <view
          class="ikz-sticky-title"
          v-for="(item, index) in type_list.list"
          :key="index"
          ><text
            class="ikz-textcenter"
            :style="
              current == index
                ? 'font-weight: 800;color: #FDAF66;border-bottom:6rpx solid #FDAF66;'
                : ''
            "
            @click="change"
            :data-index="index"
            :data-id="item.id"
            >{{ item.server_name }}</text
          ></view
        >
      </view>
      <view class="ikz-box">
        <view
          class="ikz-sticky-item"
          v-for="(item, index) in show_info.list"
          :key="index"
          @click="godetail(item.id)"
        >
          <view class="ikz-sticky-top">
            <image
              class="icon"
              :src="adminImgPath + item.business_logo_image"
              mode="aspectFill"
            ></image>
            <view class="name">{{ item.business_name }}</view>
            <view class="mode" v-if="item.delivery == 1">自提</view>
            <view class="mode" v-if="item.delivery == 2">跑腿</view>
          </view>
          <view class="ikz-sticky-content">
            <scroll-view class="list-main" scroll-x>
              <view class="list-tips" v-for="(goods, i) in item.goods" :key="i">
                <image
                  class="img"
                  :src="adminImgPath + goods.image"
                  mode="aspectFit"
                ></image>
                <view class="tag">{{ goods.name }}</view>
              </view>
            </scroll-view>
            <view class="list-right">
              <view class="flex-box">
                <view class="price">
                  <text class="icon">￥</text>
                  <text>{{ item.total_fee }}</text>
                </view>
                <view class="number">共{{ item.total_count }}件</view>
              </view>
            </view>
          </view>


         <view class="ikz-sticky-content address-box">
  <view class="address-text">
    <uni-icons type="location-filled" size="16" color="#666"></uni-icons>
    <text class="address-label">商家地址：</text>
    <text class="address-value">{{ item.address }}</text>
  </view>
  <text class="copy-btn" @click.stop="copyAddress(item.address)">
    复制地址
  </text>
</view>
          <view class="ikz-sticky-foot">
            <view class="ikz-sticky-bottom" v-if="item.status == 0">
              <view
                class="ikz-sticky-btn"
                @click.stop="pay(item.order_no, index)"
              >
                去支付
              </view>
              <view
                class="ikz-sticky-btn1"
                @click.stop="cancel(item.id, index)"
              >
                取消订单
              </view>
            </view>
            <view class="ikz-sticky-bottom" v-if="item.status == 1">
              <view class="ikz-sticky-btn5"> 等待商家接单 </view>
              <view
                class="ikz-sticky-btn1"
                @click.stop="cancel(item.id, index)"
              >
                取消订单
              </view>
            </view>
            <!-- <view class="ikz-sticky-bottom" v-if="item.status == 2">
             
              <view
                class="ikz-sticky-btn2"
                @click.stop="confirm(item.id, index)"
              >
                确认取货
              </view>
            </view> -->
            <view class="ikz-sticky-bottom" v-if="item.status == 3">
              <view class="ikz-sticky-btn3"> 已完成 </view>
            </view>
            <view class="ikz-sticky-bottom" v-if="item.status == 4">

              <view
              v-if="item.status == 4 && item.cancel_reason"
              view
              class="ikz-sticky-start"
              style="color: #ff6565; font-size: 24rpx; margin-top: 10rpx"
            >
              <uni-icons
                type="info"
                size="16"
                color="#f40"
                style="margin-right: 5px"
              ></uni-icons>
              取消原因：{{ item.cancel_reason }}
            </view>
            
              <view class="ikz-sticky-btn3"> 已取消 </view>
            </view>
          </view>
        </view>
      </view>
      <view class="ikz-more" v-if="load_more == 4"> ——我也是有底线的—— </view>
      <view class="ikz-more" v-if="load_more == 5">
        <image class="ikz-empty" src="/static/empty.png"></image>
      </view>
    </view>
    <!-- list -->
  </view>
</template>

<script>
import ikzLoading from "@/pages/Component/Public/Loading/loading.vue";
var app = getApp();
import ikz from "@/pages/Common/tools.js";
export default {
  components: {
    ikzLoading,
  },
  data() {
    return {
      template_id: {},
      adminImgPath: app.globalData.adminImgPath,
      loading_css: {
        display: "flex",
      },
      status: "",
      show_info: {
        list: [],
      },
      type_list: {
        list: [
          {
            id: "",
            server_name: "全部",
          },
          {
            id: "0",
            server_name: "待付款",
          },
          {
            id: "1",
            server_name: "等待商家接单",
          },
          {
            id: "2",
            server_name: "已接单",
          },
          {
            id: "3",
            server_name: "已完成",
          },
          {
            id: "4",
            server_name: "已取消",
          },
        ],
      },
      page: 1,
      limit: 10,
      load_more: 2,
      type_index: "",
      current: 0,
      show_status: 2,
    };
  },
  onLoad(options) {
    this.status = options.status || "";
    if (this.status == "") {
      this.current = 0;
    } else {
      this.current = Number(this.status) + 1;
    }
    this.orderList((res) => {
      this.loading_css.display = "none";
    });
  },
  onShow() {
    this.templateId((res) => {
      this.loading_css.display = "none";
    });
    if (this.show_status == 2) {
      this.show_status = 3;
    } else {
      this.page = 1;
      this.orderList((res) => {
        this.loading_css.display = "none";
      });
    }
  },
  onPullDownRefresh() {
    this.page = 1;
    this.orderList((res) => {
      uni.stopPullDownRefresh();
    });
  },
  onReachBottom() {
    if (this.load_more == 2) {
      this.page++;
      this.load_more = 3;
      this.orderList((res) => {});
    }
  },
  methods: {
    //请求页面数据
    orderList(fn) {
      var path = "/xyb/supermarket/order/index";
      var data = {
        page: this.page,
        limit: this.limit,
        status: this.status,
      };
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          console.log(res);
          var temp_list = res.data.data.data;
          if (this.page != 1) {
            for (var i = 0; i < temp_list.length; i++) {
              this.show_info.list.push(temp_list[i]);
            }
          } else {
            this.show_info.list = temp_list;
          }
          if (temp_list.length == this.limit) {
            this.load_more = 2;
          } else {
            if (this.page == 1) {
              if (temp_list.length == 0) {
                this.load_more = 5;
              } else {
                this.load_more = 4;
              }
            } else {
              this.load_more = 4;
            }
          }
          this.$forceUpdate();
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        fn();
      });
    },
    godetail(id) {
      uni.navigateTo({
        url: "/pages/Component/supermarket/Program/order/details?id=" + id,
      });
    },
    change: function (e) {
      this.current = e.currentTarget.dataset.index;
      this.status = e.currentTarget.dataset.id;
      this.page = 1;
      this.orderList((res) => {});
    },
    pay(order_no, index) {
      uni.showLoading({
        mask: true,
        title: "正在请求支付...",
      });
      var path = "/xyb/supermarket/order/wx_minapp_pay";
      var data = {
        order_no: order_no,
      };
      ikz.post(path, data, (res) => {
        console.log("调起小程序微信支付 ", res);
        uni.hideLoading();
        if (res.data.code == 1) {
          wx.requestPayment({
            timeStamp: res.data.data.timeStamp,
            nonceStr: res.data.data.nonceStr,
            package: res.data.data.package,
            signType: res.data.data.signType,
            paySign: res.data.data.paySign,
            success: (res) => {
              console.log("success", res);
              if (res.errMsg == "requestPayment:ok") {
                uni.navigateTo({
                  url:
                    "/pages/Component/supermarket/Program/store/success?id=" +
                    this.show_info.list[index].id +
                    "&type=" +
                    this.show_info.list[index].delivery +
                    "&address=" +
                    this.show_info.list[index].address,
                });
              }
            },
            fail: (res) => {
              console.log("fail", res);
              uni.showToast({
                title: "支付失败，请稍后再试",
                duration: 2000,
                icon: "none",
              });
            },
            complete: (res) => {
              console.log("complete", res);
            },
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: "none",
          });
        }
      });
    },
    // 复制地址
    copyAddress(address) {
      uni.setClipboardData({
        data: address,
        success: () => {
          uni.showToast({
            title: "地址已复制",
            icon: "none",
          });
        },
      });
    },
      //获取模板参数
    templateId(fn) {
      var path = "/xyb/wechat_mini_push/template_id_list";
      var data = {};
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          this.template_id = res.data.data;
          console.log("template_id的值", this.template_id);
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        fn();
      });
    },

    cancel(id,index) {
      const _this = this;
      var temp_id = [
        // this.template_id.user_apply_cancel,
        this.template_id.business_refuse_user,
      ];

      uni.requestSubscribeMessage({
        tmplIds: temp_id,
        success(res) {
          _this.processCancelOrder(id,index);
        },
        fail(res) {
          // that.up_status == 2;
          if (res.errCode == 20004) {
            uni.showModal({
              title: "提示",
              content: "请前往设置打开接受通知",
              confirmText: "确定",
              success(res) {
                _this.processCancelOrder(id,index);
              },
            });
          } else {
            uni.showModal({
              title: "提示",
              content: "未订阅消息，无法接收到订单通知",
              confirmText: "确定",
              success(res) {
                _this.processCancelOrder(id,index);
              },
            });
          }
        },
      });
    },
    processCancelOrder(id, index) {
      var that = this;
      uni.showModal({
        title: "提示",
        content: "确定取消订单？",
        success: function (res) {
          if (res.confirm) {
            uni.showLoading({
              title: "加载中",
              mask: true,
            });
            var path = "/xyb/supermarket/order/cancel";
            var data = {
              id: id,
            };
            ikz.post(path, data, (res) => {
              if (res.data.code) {
                uni.showToast({
                  title: "取消成功",
                  duration: 2000,
                });
                that.show_info.list[index].status = 4;
                if (that.show_info.list.length == 0) {
                  that.load_more = 5;
                }
                that.$forceUpdate();
              } else {
                uni.showModal({
                  title: "提示",
                  content: res.data.msg,
                  showCancel: false,
                  success: function (res) {},
                });
              }
              uni.hideLoading();
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // confirm(id, index) {
    //   var that = this;
    //   uni.showModal({
    //     title: "提示",
    //     content: "确定订单已收货？",
    //     success: function (res) {
    //       if (res.confirm) {
    //         var path = "/xyb/supermarket/order/confirm_complete";
    //         var data = {
    //           id: id,
    //         };
    //         uni.showLoading({
    //           title: "加载中",
    //           mask: true,
    //         });
    //         ikz.post(path, data, (res) => {
    //           if (res.data.code) {
    //             uni.showToast({
    //               title: "收货成功",
    //               duration: 2000,
    //             });
    //             that.show_info.list[index].status = 3;
    //             if (that.show_info.list.length == 0) {
    //               that.load_more = 5;
    //             }
    //             that.$forceUpdate();
    //           } else {
    //             uni.showModal({
    //               title: "提示",
    //               content: res.data.msg,
    //               showCancel: false,
    //               success: function (res) {},
    //             });
    //           }
    //           uni.hideLoading();
    //         });
    //       } else if (res.cancel) {
    //         console.log("用户点击取消");
    //       }
    //     },
    //   });
    // },
  },
};
</script>

<style lang="scss">
page {
  background: #f6f7fb;
}


.address-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  margin-top: 20rpx;
}

.address-text {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666;
}

.address-label {
  margin: 0 10rpx;
  color: #333;
}

.address-value {
  flex: 1;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.copy-btn {

  color: #007aff;

}

.ikz-box {
  padding-top: 20rpx;
}

.ikz-sticky-box {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  position: -webkit-sticky;
  /* #endif */
  position: sticky;
  top: var(--window-top);
  z-index: 99;
  flex-direction: row;
  margin: 0px;
  padding: 15px 0 15px 0;
  white-space: nowrap;
  overflow-x: auto;
  background: #fff;
}

.ikz-sticky-title {
  box-sizing: border-box;
  padding: 0 20rpx;
  display: inline-block;
  text-align: center;
}

.ikz-textcenter {
  padding-bottom: 10rpx;
}

.ikz-sticky-item {
  box-sizing: border-box;
  padding: 30rpx;
  width: 95%;
  margin: 0 auto 20rpx;
  background: #fff;
  border-radius: 15rpx;
}

.ikz-sticky-top {
  display: flex;
  align-items: center;

  .icon {
    width: 58rpx;
    height: 58rpx;
    border-radius: 9rpx;
  }

  .name {
    font-weight: 600;
    font-size: 29rpx;
    line-height: 40rpx;
    color: #333333;
    margin: 0 22rpx;
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1;
  }

  .mode {
    font-weight: 400;
    font-size: 22rpx;
    line-height: 31rpx;
    color: #fbc12d;
    background: #fff5da;
    border-radius: 9rpx;
    padding: 8rpx 22rpx;
  }
}

.ikz-sticky-content {
  position: relative;
  margin-top: 25rpx;

  .list-main {
    width: 100%;
    white-space: nowrap;

    .list-tips {
      display: inline-block;
      margin-left: 22rpx;
      max-width: 220rpx;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 180rpx;
      }

      .img {
        width: 180rpx;
        height: 130rpx;
        border-radius: 9rpx;
        margin-top: 29rpx;
        display: block;
        margin: 0 auto;
      }

      .tag {
        font-weight: 400;
        font-size: 25rpx;
        line-height: 36rpx;
        color: #979797;
        margin-top: 16rpx;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .list-right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba($color: #fff, $alpha: 0.9);
    padding-left: 33rpx;
    display: flex;
    align-items: center;
    align-self: center;

    .price {
      font-weight: 600;
      line-height: 29rpx;
      color: #ff0000;

      .icon {
        font-size: 22rpx;
      }

      text {
        font-size: 33rpx;
      }
    }

    .number {
      font-weight: 400;
      font-size: 22rpx;
      line-height: 29rpx;
      color: #979797;
      text-align: center;
      margin-top: 10rpx;
    }
  }
}

.ikz-sticky-foot {
  margin-top: 36rpx;
}

.ikz-sticky-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ikz-sticky-btn {
  background: #ff6565;
  color: #fff;
  padding: 0 40rpx;
  border-radius: 15rpx;
  line-height: 50rpx;
  font-size: 26rpx;
  margin-left: 15rpx;
}

.ikz-sticky-btn1 {
  background: #d54242;
  color: #fff;
  padding: 0 40rpx;
  border-radius: 15rpx;
  line-height: 50rpx;
  font-size: 26rpx;
  margin-left: 15rpx;
}

.ikz-sticky-btn2 {
  background: #76a8fd;
  color: #fff;
  padding: 0 20rpx;
  border-radius: 15rpx;
  line-height: 50rpx;
  font-size: 26rpx;
  margin-left: 15rpx;
}

.ikz-sticky-btn4 {
  background: #42d5be;
  color: #fff;
  padding: 0 20rpx;
  border-radius: 15rpx;
  line-height: 50rpx;
  font-size: 26rpx;
  margin-left: 15rpx;
}

.ikz-sticky-btn3 {
  background: #d6d6d6;
  color: #fff;
  padding: 0 20rpx;
  border-radius: 15rpx;
  line-height: 50rpx;
  font-size: 26rpx;
  margin-left: 15rpx;
}

.ikz-sticky-btn5 {
  background: #3ab74e;
  color: #fff;
  padding: 0 20rpx;
  border-radius: 15rpx;
  line-height: 50rpx;
  font-size: 26rpx;
  margin-left: 15rpx;
}

.ikz-sticky-btn6 {
  background: #fbc12d;
  color: #fff;
  padding: 0 20rpx;
  border-radius: 15rpx;
  line-height: 50rpx;
  font-size: 26rpx;
  margin-left: 15rpx;
}

.ikz-more {
  width: 100%;
  text-align: center;
  line-height: 50rpx;
  color: #999999;
  padding-bottom: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ikz-empty {
  width: 150rpx;
  height: 150rpx;
  margin-bottom: 20rpx;
  margin-top: 150rpx;
}
</style>
